    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>左右焦点图</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;

            }
            .all{
                width: 520px;
                height: 280px;
                margin: 100px auto;
                padding: 5px;
                border:1px solid #cccccc;

            }
            .inner{
                overflow: hidden;
                width: 520px;
                height: 280px;
                /*padding: 10px;*/

                position: relative;
            }
            .inner .ulLi{
                position: absolute;
                height: 280px;
                list-style: none;
                width: 500%;
            }
            .inner .ulLi li{
                float: left;
            }

            .leftBtn{
                position: absolute;
                left: 5px;
                top: 115px;
                font-size: 50px;
                color:  rgba(0, 0, 0, 0.11);
                border: 1px solid rgba(0, 0, 0, 0.11);
                background-color: rgba(206, 206, 206, 0.18);

            }
            .rightBtn{
                position: absolute;
                right: 5px;
                top: 115px;
                font-size: 50px;
                color: rgba(0, 0, 0, 0.11);
                border: 1px solid rgba(0, 0, 0, 0.11);
                background-color: rgba(206, 206, 206, 0.18);
            }
        </style>
        <script type="text/javascript">
            window.onload=function () {
                var timer=null;
                var btn=document.getElementsByClassName('btn')[0];
                var all=document.getElementsByClassName('all')[0];
                var leftBtn=document.getElementsByClassName('leftBtn')[0];
                var rightBtn=document.getElementsByClassName('rightBtn')[0];
                var ulLi=document.getElementsByClassName('ulLi')[0];
                var liChild=ulLi.children;
                all.onmouseover=function () {

                   btn.style.display='';
                };
                all.onmouseout=function () {
//                    console.log(2);
                   btn.style.display='none';
                };
                var i=0;
                leftBtn.onclick=function () {
                    i++;
                    if(i>liChild.length-1){
                        i=liChild.length-1;
                    }

                    console.log(i);
                    animate(-520*i,ulLi);
                };
                rightBtn.onclick=function () {
                    i--;
                    if(i<0){
                        i=0;
                    }
                    animate(-520*i,ulLi);
                };
   
                
                
                

                function animate(pace,func) {

                    clearInterval(timer);

                    var speed=0;
                    if (func.offsetLeft<pace){
                        speed=5;
                    }else {
                        speed=-5;
                    }
                    timer=setInterval(function () {
                        func.style.left=func.offsetLeft+speed+"px";
                        var distance=pace-func.offsetLeft;
                        if (Math.abs(distance)<=5){
                            clearInterval(timer);
                            func.style.left=pace+"px";
                        }
                    },5);
                }

            }
        </script>
    </head>
    <body>
     <div class="all">
         <div class="inner">
             <ul class="ulLi">
                 <li><img src="zuoyou焦点图/1.jpg" alt="第一张图"></li>
                 <li><img src="zuoyou焦点图/2.jpg" alt="第二张图"></li>
                 <li><img src="zuoyou焦点图/3.jpg" alt="第三张图"></li>
                 <li><img src="zuoyou焦点图/4.jpg" alt="第四张图"></li>
                 <li><img src="zuoyou焦点图/5.jpg" alt="第五张图"></li>
             </ul>
            <div class="btn">
                <span class="leftBtn"><</span>
                <span class="rightBtn">></span>
            </div>

         </div>
     </div>
    </body>
    </html>